<template>
<view class="check">
  <view class="check1" @click="showbox">
	<span v-model="text" class="spanstyle">{{text}}</span>
	<img
	  class="imgstyle"
	  :src="fold ? arrowup : arrowdown"
	/>
  </view>
  <view v-show="fold" class="dropbox">
	<span
	  @click="check(item)"
	  v-for="(item, index) in list"
	  :key="index"
	  class="select"
	  >{{ item.label }}</span>
  </view>
</view>
</template>
<script>
export default {
  props:["name","list"],
  data() {
    return {
      text:this.name,
      fold: false,
      arrowdown: require("../static/normal.png"),
      arrowup: require("../static/selected.png"),
    };
  },
  methods: {
    showbox() {
      this.fold = !this.fold;
    },
    check(item) {
        this.text=item.label;
        this.fold = !this.fold;
        this.$emit('selectbox',item.id)
    },
  },
  mounted(){
	  // console.log(this.list)
  }
};
</script>
<style scoped lang="stylus">
.check {
  width: 332rpx;
  height: 62rpx;
  border: 1rpx solid #E4E4E4;
  border-radius: 4rpx;
  font-size: 12rpx;
  margin-top :24rpx;
  .check1{
  display flex
  justify-content space-between
  align-items center
  padding 0 20rpx
  height: 60rpx;
  }
}
.imgstyle {
  width :32rpx;
  height :32rpx;
  vertical-align middle
}
.dropbox {
  position: relative;
  left :-1rpx;
  top:2rpx;
  width: 298rpx;
  z-index 999
  padding 0 18rpx
  background-color :#FFFFFF;
  height :316rpx;
  overflow-y: scroll;
}
.select {
  display: block;
  width: 100%;
  height: 26px;
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spanstyle{
    color:#C7C7C7;
    display: inline-block;
	font-size: 28rpx;
}
</style>